<template>
	<div>
	<!--  -->
		<div class="breadcrumb-preview">
			<el-breadcrumb :separator="'Ξ'">
				<el-breadcrumb-item class="item1" to="/"><a>首页</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item2" v-for="(item, index) in breadcrumbItem" :key="index" :to="'/index/chatmessage?centerType=' + (centerType?'1':'0')"><a>{{item.name}}</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item3"><a href="javascript:void(0);">详情</a></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="back_box">
			<el-button class="backBtn" size="mini" @click="backClick">
				<span class="icon iconfont icon-jiantou33"></span>
				<span class="text">返回</span>
			</el-button>
		</div>
		<div class="detail-preview">
			<div class="attr">
				<div class="info">
					<div class="title-item">
						<div class="detail-title">
						</div>
					</div>
					<div class="item">
						<div class="lable">用户ID</div>
						<div class="text "  >{{detail.uid}}</div>
					</div>
					<div class="item">
						<div class="lable">好友用户ID</div>
						<div class="text "  >{{detail.fid}}</div>
					</div>
					<div class="item">
						<div class="lable">内容</div>
						<div class="text "  >{{detail.content}}</div>
					</div>
					<div class="item">
						<div class="lable">格式(1:文字，2:图片)</div>
						<div class="text "  >{{detail.format}}</div>
					</div>
					<div class="item">
						<div class="lable">消息已读(0:未读，1:已读)</div>
						<div class="text "  >{{detail.isread}}</div>
					</div>
					<div class="btn_box">
						<el-button class="editBtn" v-if="btnAuth('chatmessage','修改')" @click="editClick">修改</el-button>
						<el-button class="delBtn" v-if="btnAuth('chatmessage','删除')" @click="delClick">删除</el-button>
					</div>
				</div>
			</div>
		
			<div class="swiper3" v-if="detailBanner.length">
				<div class="big">
					<img id="big" :src="swiperBigUrl" class="image">
				</div>
				<div class="samll">
					<div class="swiper3-small-item" v-for="item in detailBanner" :key="item.id">
						<img v-if="item.substr(0,4)=='http'" :src="item" @click="swiperClick3(item)" class="image">
						<img v-else :src="baseUrl + item" @click="swiperClick3(baseUrl + item)" class="image">
					</div>
				</div>
			</div>


		

			<div class="detail2">
			</div>
			<el-tabs class="detail-tabs" v-model="activeName" type="border-card" v-if="tabsNum>0" >
			</el-tabs>

		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import Swiper from "swiper";
	export default {
		//数据集合
		data() {
			return {
				tablename: 'chatmessage',
				baseUrl: '',
				breadcrumbItem: [
					{
						name: '消息表'
					}
				],
				title: '',
				detailBanner: [],
				userid: Number(localStorage.getItem('frontUserid')),
				id: 0,
				detail: {},
				tabsNum: 0,
				activeName: 'first',
				total: 1,
				pageSize: 10,
				totalPage: 1,
				buynumber: 1,
				centerType: false,
				storeupType: false,
				swiperBigUrl: null,
			}
		},
		created() {
			if(this.$route.query.centerType&&this.$route.query.centerType!=0) {
				this.centerType = true
			}
			if(this.$route.query.storeupType&&this.$route.query.storeupType!=0) {
				this.storeupType = true
			}
			
			this.init();
		},
		mounted() {
		},
		//方法集合
		methods: {
			swiperClick3(src) {
				this.swiperBigUrl = src
			},
			init() {
				this.id = this.$route.query.id
				this.baseUrl = this.$config.baseUrl;
				this.$http.get(this.tablename + '/detail/'  + this.id, {}).then(res => {
					if (res.data.code == 0) {
						this.detail = res.data.data;
						this.$forceUpdate();
						if(localStorage.getItem('frontToken')){
						}

					}
					if (this.detailBanner.length) {
						if (this.detailBanner[0].substr(0,4)=='http') {
							this.swiperBigUrl = this.detailBanner[0]
						} else {
							this.swiperBigUrl = this.baseUrl + this.detailBanner[0]
						}
					}
				});
			},
			curChange(page) {
				this.getDiscussList(page);
			},
			prevClick(page) {
				this.getDiscussList(page);
			},
			nextClick(page) {
				this.getDiscussList(page);
			},
			sizeChange(size){
				this.pageSize = size
				this.getDiscussList(1);
			},
			// 返回按钮
			backClick(){
				if(this.storeupType){
					history.back()
				}else{
					let params = {}
					if(this.centerType){
						params.centerType = 1
					}
					this.$router.push({path: '/index/chatmessage', query: params});
				}
			},
			// 下载
			download(file ){
				if(!file) {
					this.$message({
						type: 'error',
						message: '文件不存在',
						duration: 1500,
					});
					return;
				}
				let arr = file.replace(new RegExp('upload/', "g"), "")
				axios.get(this.baseUrl + '/file/download?fileName=' + arr, {
					headers: {
						token: localStorage.getItem("frontToken")
					},
					responseType: "blob"
				}).then(({
					data
				}) => {
					const binaryData = [];
					binaryData.push(data);
					const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
						type: 'application/pdf;chartset=UTF-8'
					}))
					const a = document.createElement('a')
					a.href = objectUrl
					a.download = arr
					// a.click()
					// 下面这个写法兼容火狐
					a.dispatchEvent(new MouseEvent('click', {
						bubbles: true,
						cancelable: true,
						view: window
					}))
					window.URL.revokeObjectURL(data)
				},err=>{
					axios.get((location.href.split(this.$config.name).length>1 ? location.href.split(this.$config.name)[0] :'') + this.$config.name + '/file/download?fileName=' + arr, {
						headers: {
							token: localStorage.getItem("frontToken")
						},
						responseType: "blob"
					}).then(({
						data
					}) => {
						const binaryData = [];
						binaryData.push(data);
						const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
							type: 'application/pdf;chartset=UTF-8'
						}))
						const a = document.createElement('a')
						a.href = objectUrl
						a.download = arr
						// a.click()
						// 下面这个写法兼容火狐
						a.dispatchEvent(new MouseEvent('click', {
							bubbles: true,
							cancelable: true,
							view: window
						}))
						window.URL.revokeObjectURL(data)
					})
				})
			},


			// 权限判断
			btnAuth(tableName,key){
				if(this.centerType){
					return this.isBackAuth(tableName,key)
				}else{
					return this.isAuth(tableName,key)
				}
			},
			// 修改
			editClick(){
				this.$router.push(`/index/chatmessageAdd?type=edit&&id=${this.detail.id}`);
			},
			// 删除
			async delClick(){
				await this.$confirm('是否删除此消息表？') .then(_ => {
					this.$http.post('chatmessage/delete', [this.detail.id]).then(async res => {
						if (res.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
								duration: 1500,
								onClose: () => {
									history.back()
								}
							});
						}
					});
				}).catch(_ => {});
			},
		},
		components: {
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.detail-preview {
		padding: 30px 16%;
		margin: 0 auto;
		align-content: flex-start;
		display: flex;
		width: 100%;
		align-items: flex-start;
		position: relative;
		flex-wrap: wrap;
		.attr {
			padding: 0 10px;
			background: #fff;
			flex: 1;
			display: flex;
			width: 55%;
			position: relative;
			order: 2;
			.info {
				border-radius: 10px;
				padding: 10px;
				margin: 0 0 0 10px;
				background: #F5F5F5;
				flex: 1;
				.title-item {
					padding: 10px;
					margin: 0 0 10px 0;
					background: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.detail-title {
						color: #333;
						font-size: 16px;
					}
				}
				.item {
					padding: 5px 10px;
					margin: 0 0 10px 0;
					background: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					.lable {
						padding: 0 10px;
						color: #000;
						white-space: nowrap;
						width: auto;
						font-size: 14px;
						line-height: 24px;
						text-align: right;
						height: auto;
					}
					.text {
						padding: 0 10px;
						color: #000;
						flex: 1;
						font-size: 14px;
						line-height: 24px;
					}
					.price {
						color: #f00;
					}
					.bold {
						font-weight: bold;
					}
					.link {
						cursor: pointer;
						text-decoration: underline;
					}
				}
				.btn_box {
					padding: 10px 0 0;
					display: flex;
					flex-wrap: wrap;
				}
				.editBtn {
					border: 0;
					cursor: pointer;
					border-radius: 0;
					padding: 0 20px;
					margin: 0 5px 5px 0;
					outline: none;
					color: #fff;
					background: #A68561;
					width: auto;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
				}
				.editBtn:hover {
					opacity: 0.7;
				}
				.delBtn {
					border: 0;
					cursor: pointer;
					border-radius: 0;
					padding: 0 20px;
					margin: 0 5px 5px 0;
					outline: none;
					color: #fff;
					background: #5E769A;
					width: auto;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
				}
				.delBtn:hover {
					opacity: 0.7;
				}
			}
		}
		.swiper3 {
			background: #fff;
			width: 45%;
			height: auto;
			order: 1;
			.big {
				margin: 0 0 10px;
				background: #fff;
				width: 100%;
				position: relative;
				height: 500px;
				img {
					object-fit: cover;
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.samll {
				padding: 0 0px;
				background: #fff;
				display: flex;
				width: 100%;
				height: 120px;
				.swiper3-small-item {
					margin: 0 5px;
					background: #fff;
					position: relative;
					height: 100%;
					img {
						object-fit: cover;
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.detail2 {
			border: 0px solid #DCDFE6;
			border-radius: 0;
			box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .1);
			padding: 0;
			margin: 20px 0;
			background: #FFF;
			width: 100%;
			order: 5;
			.desc-view {
				border: 0px solid #DCDFE6;
				border-radius: 0;
				box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
				padding: 0 20px;
				margin: 0 0 10px 0;
				background: #a4b3f6;
				display: flex;
				width: 100%;
				.desc-label {
					padding: 0 20px;
					margin: 3px 0 0;
					clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
					color: #fff;
					background: #6c84ed;
					font-size: 14px;
					line-height: 50px;
				}
			}
			.desc-text {
				padding: 15px;
				background: #FFF;
				width: 100%;
			}
			.add.commentForm {
				box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
				padding: 15px;
				margin: 0 0 20px;
				width: 100%;
				.item {
					display: flex;
					width: 100%;
					height: auto;
					/deep/ .el-form-item__label {
						padding: 0 10px 0 0;
						color: #666;
						width: 80px;
						font-size: 14px;
						line-height: 40px;
						text-align: right;
					}
					.editor {
						border: 0;
						border-radius: 4px;
						box-shadow: 0 0 0px rgba(64, 158, 255, .5);
						outline: none;
						color: #333;
						width: 100%;
						font-size: 14px;
						min-height: auto;
						line-height: 32px;
						height: auto;
						/deep/ .avatar-uploader {
							height: 0;
							line-height: 0;
						}
					}
				}
				.commentBtn {
					padding: 0 0 0 80px;
					margin: 10px 0 0;
					width: 100%;
					height: auto;
					.submitBtn {
						border: 0;
						cursor: pointer;
						border-radius: 0;
						padding: 0;
						margin: 0 20px 0 0;
						outline: none;
						color: rgba(255, 255, 255, 1);
						background: #6c84ed;
						width: 128px;
						font-size: 14px;
						line-height: 40px;
						height: 40px;
					}
					.submitBtn:hover {
						background: #6c84ed80;
					}
					.resetBtn {
						border: 0;
						cursor: pointer;
						border-radius: 0;
						padding: 0;
						margin: 0 20px 0 0;
						outline: none;
						color: #6E6E6E;
						background: #E8E8E8;
						width: 128px;
						font-size: 14px;
						line-height: 40px;
						height: 40px;
					}
					.resetBtn:hover {
						background: #E8E8E880;
					}
				}
			}
			.comment-list {
				box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
				padding: 15px;
				.comment-item {
					padding: 15px;
					margin: 0 0 20px;
					background: #F5F5F5;
					width: 100%;
					border-color: #999;
					border-width: 0;
					align-items: center;
					position: relative;
					border-style: solid;
					height: auto;
					.istop {
						box-shadow: 0 0px 0px rgba(0,0,0,.1);
						top: 0;
						background: none;
						position: absolute;
						right: 10px;
						.icon {
							color: #000;
						}
					}
					.user {
						display: flex;
						width: 100%;
						align-items: center;
						height: auto;
						.el-image {
							border-radius: 100%;
							margin: 0 10px 0 0;
							object-fit: cover;
							width: 40px;
							height: 40px;
						}
						.name {
							color: #333;
							font-size: 16px;
						}
					}
					.comment-time {
					}
					.comment-content-box {
						border-radius: 4px;
						padding: 8px;
						margin: 10px 0px 0px;
						word-wrap: break-word;
						color: #333;
						font-size: 14px;
						line-height: 1.5;
						.zancai-box {
							margin: 8px 0 0 0;
							display: flex;
							width: 100%;
							justify-content: flex-end;
							align-items: center;
							height: 30px;
							.zan-item {
								display: flex;
								align-items: center;
								.icon {
								font-size: 14px;
								}
								.label {
								display: none;
								font-size: 14px;
								}
								.num {
								font-size: 14px;
								}
							}
							.zan-item.active {
								background: none;
								.icon {
								color: #ff0000;
								font-size: 14px;
								}
								.label {
								color: #ff0000;
								display: none;
								font-size: 14px;
								}
								.num {
								color: #ff0000;
								font-size: 14px;
								}
							}
							.zan-item:hover {
								opacity: 0.8;
								.icon {
								color: #ff000030;
								}
								.label {
								color: #ff000030;
								}
								.num {
								color: #ff000030;
								}
							}
							.cai-item {
								display: flex;
								align-items: center;
								.icon {
								font-size: 14px;
								}
								.label {
								display: none;
								font-size: 14px;
								}
								.num {
								font-size: 14px;
								}
							}
							.cai-item.active {
								background: none;
								.icon {
								color: #ff0000;
								font-size: 14px;
								}
								.label {
								color: #ff0000;
								display: none;
								font-size: 14px;
								}
								.num {
								color: #ff0000;
								font-size: 14px;
								}
							}
							.cai-item:hover {
								opacity: 0.8;
								.icon {
								color: #ff000030;
								}
								.label {
								color: #ff000030;
								}
								.num {
								color: #ff000030;
								}
							}
						}
						.comment-btn {
							margin: 8px 0 0 0;
							display: flex;
							width: 100%;
							justify-content: flex-end;
							align-items: center;
							height: 40px;
							.comment-del {
								border: 0;
								cursor: pointer;
								border-radius: 0;
								padding: 0 20px;
								margin: 0;
								outline: none;
								color: #6E6E6E;
								background: #E8E8E8;
								width: auto;
								font-size: 14px;
								line-height: 30px;
								height: 30px;
							}
						}
					}
				}
			}
		}
		.detail-tabs {
			border: 0px solid #DCDFE6;
			box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, .1);
			background: #FFF;
			width: 100%;
			order: 7;
			& /deep/ .el-tabs__header .el-tabs__nav-wrap {
				margin-bottom: 0;
			}
			/deep/ .el-tabs__header {
				padding: 0 20px;
				margin: 0;
				background: #a4b3f6;
				border-color: #E4E7ED;
				border-width: 0;
				border-style: solid;
			}
			
			/deep/ .el-tabs__header .el-tabs__item {
				border: 0;
				padding: 0 20px;
				margin: 3px 10px 0;
				color: #fff;
				background: transparent;
				font-weight: 500;
				display: inline-block;
				font-size: 14px;
				line-height: 50px;
				position: relative;
				list-style: none;
				height: 50px;
			}
			
			/deep/ .el-tabs__header .el-tabs__item:hover {
				border: 0;
				clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
				color: #fff;
				background: #6c84ed;
			}
			
			/deep/ .el-tabs__header .el-tabs__item.is-active {
				border: 0;
				clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
				color: #fff;
				background: #6c84ed;
			}
			
			/deep/ .el-tabs__content {
				padding: 15px;
			}
		}
	}
</style>
